<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-Vue的事件处理</title>
</head>
<body>
<div id="app">
    <form @submit.prevent="fn1()">
        姓名:<input type="text" v-model="user.userName"/><br><br>
        密码:<input type="text" v-model="user.userPwd"/><br><br>

        性别:<input type="radio" name="sex" value="male" v-model="user.gender">男
        <input type="radio" name="sex" value="female" v-model="user.gender">女<br/><br>


        爱好:<input type="checkbox" value="java" v-model="user.hobbys">java
        <input type="checkbox" value="html" v-model="user.hobbys">html
        <input type="checkbox" value="php" v-model="user.hobbys">php<br/><br>
        职业:
        <select v-model="user.job">
            <option value="java工程师">java工程师</option>
            <option value="html工程师">html工程师</option>
            <option value="全栈工程师">全栈工程师</option>
        </select><br><br>

        个人简介<textarea v-model="user.introduce"></textarea> <br><br>


        <input type="submit" value="提交修改"/>


    </form>
</div>

</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            user: {
                userName: "",
                userPwd: "",
                gender: "male",
                hobbys: [],
                job: "java工程师",
                introduce: "这个人很懒，什么都没留下。"
            }
        },
        methods: {

            fn1(){
                console.log(this.user);
            }

        }
    })

</script>
</html>